﻿<div>
    <Divider Orientation="left" Style="color: #333; font-weight:normal">
        Align Top
    </Divider>

    <div class="flex-demo">
        <Row Justify="center" Align="top">
            <Col Span="4"><p class="height-100">col-4</p></Col>
            <Col Span="4"><p class="height-50">col-4</p></Col>
            <Col Span="4"><p class="height-120">col-4</p></Col>
            <Col Span="4"><p class="height-80">col-4</p></Col>
        </Row>
    </div>


    <Divider Orientation="left" Style="color: #333; font-weight:normal">
        Align Center
    </Divider>
    <div class="flex-demo">
        <Row Justify="space-around" Align="middle">
            <Col  Span="4"><p class="height-100">col-4</p></Col>
            <Col Span="4"><p class="height-50">col-4</p></Col>
            <Col Span="4"><p class="height-120">col-4</p></Col>
            <Col Span="4"><p class="height-80">col-4</p></Col>
        </Row>
    </div>

    <Divider Orientation="left" Style="color: #333; font-weight:normal">
        Align Bottom
    </Divider>
    <div class="flex-demo">
        <Row Justify="space-between" Align="bottom">
            <Col Span="4"><p class="height-100">col-4</p></Col>
            <Col Span="4"><p class="height-50">col-4</p></Col>
            <Col Span="4"><p class="height-120">col-4</p></Col>
            <Col Span="4"><p class="height-80">col-4</p></Col>
        </Row>
    </div>
    </div>
    <style>
        .flex-demo {
            background-color: rgba(128, 128, 128, 0.08);
        }
    </style>

    @code{

    }
